<template>
	<!-- "{'height':'calc(100vh - '+($route.meta.hideHeader?$route.meta.hideHeade:hideHeader)+')'}" -->
	<div id="app">
		<CommonHeader ></CommonHeader>
		<transition name="slide-fade">
			    <!-- <keep-alive>
			      <router-view v-if="$route.meta.keepAlive"/>
			    </keep-alive>
			    <router-view v-if="!$route.meta.keepAlive"></router-view> -->
		  <router-view  v-if='isRouterAlive'/>
		</transition>
		<!-- <CommonFooter></CommonFooter> -->
	</div>
</template>
<script>
	import CommonHeader from '@/components/common/common-header'
	export default {
		name: 'App',
		components: {
			CommonHeader
		},
		provide(){
		
			return{reload: this.reload}
		},
		data(){
			return {
				isRouterAlive:true
			}
		},
		methods:{
			reload(){
				this.isRouterAlive = false 
				this.$nextTick(()=>{
					this.isRouterAlive = true
				})
			}
		}
	}
</script>

<style lang="less" >
   @import "./style/common.less";
	html {
		.toolbar(auto);
		position: relative;
		
		#app {
			font-family: 'Avenir', Helvetica, Arial, sans-serif;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			color: #3D3F42;
			width: 100%;
			max-width: 750px;
			margin: 0 auto;
			>div:nth-child(2){
				
				padding-top:46px;
				position: relative;				
				>* {
			     //height: 100%;
         
				}
			}
		}

	}
</style>
